<template>
  <a-layout class="ant-layouts">
    <!-- 左边版块 -->
    <a-layout-sider
      class="ant-layouts-left"
      :collapsedWidth="0"
      v-model:collapsed="collapsed"
      :trigger="null"
      :width="leftWidth"
      :style="{ height: '100vh' }"
      :theme="theme"
    >
      <!-- 左边logo   -->
      <div
        :data-theme="theme"
        class="ant-layouts-logo"
        :style="{ height: leftLogoHeight + 'px' }"
      >
        <!-- <img src="@/assets/img/logo/layoutLogo.png" /> -->
        <h2 style="font-size: 16px">{{ app.name }}</h2>
      </div>
      <!-- 左边菜单 -->
      <div
        class="ant-layouts-menus"
        :style="{
          width: '100%',
          overflow: 'auto',
          height: 'calc(100vh - ' + leftLogoHeight + 'px)',
          left: 0,
        }"
        v-scrollBar
      >
        <IMenu v-if="leftMenuStatus" :menuList="menuList" :theme="theme" />
      </div>
    </a-layout-sider>

    <!-- 右边版块 -->
    <a-layout
      class="ant-layouts-right"
      :style="{ width: 'calc(100% - ' + leftWidth + 'px)' }"
    >
      <!-- 右边头部 -->
      <a-layout-header
        class="ant-layouts-headers"
        :style="{ background: '#fff', top: 0, paddingLeft: '24px' }"
      >
        <div class="ant-header-left">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="triggerfun('unfold')"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="triggerfun('fold')"
          />
          <SyncOutlined
            @click="refresh"
            class="trigger syncoutlined"
            :spin="spinning"
          />
          <!-- 路由面包屑导航 -->
          <Breadcrumbs
            v-if="showBreadcrumbs"
            class="ant-layouts-breadcrumb"
            :list="breadcrumbList"
          />
        </div>
        <div class="ant-header-right">
          <HeaderRight />
        </div>
      </a-layout-header>

      <!-- 右边下部 屏高-头部(64) -->
      <a-layout-content
        class="ant-layouts-content"
        :style="{ maxHeight: screenHeight - 64 + 'px' }"
      >
        <!-- 右边内容 屏高-头部(64) -->
        <div
          class="ant-layouts-content-body"
          :style="{
            maxHeight: screenHeight - 64 + 'px',
            overflow: 'initial',
          }"
          v-scrollBar
        >
          <a-spin :indicator="indicator" size="large" :spinning="spinning">
            <!-- 路由内容 -->
            <router-view class="ant-layouts-content-views" />
            <!-- 右边底部版权 -->
            <a-layout-footer
              v-if="footerHeight && app.layouts.showFooter"
              class="ant-layouts-footer"
              :style="{ textAlign: 'center', height: footerHeight + 'px' }"
              v-html="footerContent"
            />
          </a-spin>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  SyncOutlined,
  Loading3QuartersOutlined,
} from "@ant-design/icons-vue";
import {
  defineComponent,
  reactive,
  nextTick,
  h,
  toRefs,
  onMounted,
  watch,
} from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
import IMenu from "@/layouts/dark/IMenu.vue";
import Breadcrumbs from "@/layouts/public/Breadcrumbs.vue";
import HeaderRight from "@/layouts/public/HeaderRight.vue";
import { app, refreshScrollTop } from "@/config";
import store from "@/store";
import { getLeftMenuList } from "@/config/utils/permission";
export default defineComponent({
  components: {
    IMenu,
    HeaderRight,
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    SyncOutlined,
    Breadcrumbs,
  },
  setup() {
    let state = reactive({
      breadcrumbList: [],
      showBreadcrumbs: app.layouts.showBreadcrumbs,
      screenWidth: document.body.clientWidth, // 监听窗口变化
      screenHeight: document.body.clientHeight, // 监听窗口变化
      leftWidth: app.layouts.dark.leftWidth, // 左边宽度
      leftLogoHeight: app.layouts.dark.leftLogoHeight, // 左边logo高度
      footerHeight: 0, // 是否显示底部版权
      footerContent: app.layouts.footerContent, // 底部版权数据
      menuList: getLeftMenuList(), // 左边菜单数据
      spinning: true, // 加载动画
      collapsed: false,
      theme: app.layouts.dark.theme, //light,dark
      leftMenuStatus: false,
    });
    // 强制更新视图
    const forcedUpdate = () => {
      state.leftMenuStatus = false;
      nextTick(() => {
        state.leftMenuStatus = true;
      });
    };
    forcedUpdate();
    // 监听菜单实时权限变化
    watch(
      () => store.state.adminMenuList,
      (data) => {
        state.menuList = getLeftMenuList(data);
        //写入操作
        forcedUpdate();
      }
    );
    // 计算变量
    window.onresize = () => {
      return (() => {
        // 重新赋值最新窗口数据
        state.screenWidth = document.body.clientWidth;
        state.screenHeight = document.body.clientHeight;
      })();
    };

    let showFooterFun = () => {
      if (app.layouts.showFooter) {
        state.footerHeight = app.layouts.footerHeight;
      } else {
        state.footerHeight = 0;
      }
    };
    showFooterFun();

    // 加载动画延迟时间毫秒
    const time = 200;
    const timeout = () => {
      setTimeout(() => {
        state.spinning = false;
      }, time);
    };

    let refresh = () => {
      state.spinning = true;
      refreshScrollTop();
      nextTick(() => {
        // 关闭加载动画
        timeout();
      });
    };
    // 关闭加载动画
    nextTick(() => {
      timeout();
    });

    // 页面加载图标定义
    const indicator = h(Loading3QuartersOutlined, {
      style: {
        fontSize: "38px",
      },
      spin: true,
    });

    // 面包屑导航
    const route = useRoute();

    let hiddenBreadcrumb = (matched) => {
      state.breadcrumbList = matched; //更新路由菜单数组
    };
    onMounted(() => {
      let matched = route.matched; //获取菜单对应的路由信息
      hiddenBreadcrumb(matched);
    });
    watch(
      () => route.matched,
      (newVal) => {
        let matched = newVal;
        hiddenBreadcrumb(matched);
      }
    );

    // 动态监听路由变化，解决滚动高度不为0的问题
    onBeforeRouteUpdate(() => {
      refresh();
    });

    let triggerfun = () => {
      state.collapsed = !state.collapsed;
    };
    return {
      triggerfun,
      app,
      refresh, //刷新页面
      indicator, //页面属性图标
      ...toRefs(state), //面包屑导航
    };
  },
});
</script>
<style scoped>
.site-layout .site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}

.ant-layouts {
  position: fixed;
  width: 100%;
}
.ant-layouts-left {
  position: relative;
  z-index: 6;
  box-shadow: 2px 0 8px #f5f5f5;
}
[data-theme="dark"] .ant-layouts-left {
  position: relative;
  z-index: 6;
  box-shadow: 2px 0 8px #d9dbde;
}
.ant-layouts-logo {
  position: relative;
  top: 0;
  margin: 16px 16px 0 16px;
  text-align: center;
  display: flex;
}
.ant-layouts-logo img {
  width: 32px;
  height: 32px;
  max-width: 50%;
  max-height: 100%;
  margin-right: 8px;
}
.ant-layouts-logo h2 {
  color: #0e0e0ed9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-theme="dark"].ant-layouts-logo h2 {
  color: #fff;
}
.ant-layouts-menus {
  position: relative;
  padding-bottom: 60px;
  bottom: 0;
}
.ant-layouts-right {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ant-layouts-headers {
  width: 100%;
  display: flex;
  z-index: 5;
  justify-content: space-between;
  box-shadow: 0 2px 8px #f0f0f0;
}
.ant-layouts-headers .trigger {
  font-size: 18px;
  color: #999;
  display: flex;
  align-items: center;
}
.ant-layouts-headers .syncoutlined {
  padding: 0 18px;
  cursor: pointer;
}
.ant-header-left {
  display: flex;
  position: relative;
  left: 0;
}
.ant-header-right {
  position: relative;
  right: 0;
}
.ant-layouts-breadcrumb {
  display: flex;
  align-items: center;
  margin-left: 6px;
}
.ant-layouts-content {
  min-height: 150px;
  overflow: hidden;
}
.ant-layouts-content-body {
  margin: 0px 1rem;
  padding-top: 1rem;
  position: relative;
  min-width: 150px;
}
.ant-layouts-footer {
  width: 100%;
  padding: 0 !important;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: unset;
}
</style>
